<template>
  <router-view v-slot="{ Component }">
    <transition>
      <keep-alive :include="routerNames">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script>
export default {
  data() {
    return {
      routerNames:[]
    }
  },
  computed: {
    /**
     * @description 设置需要缓存的 include：
     * 1.格式是以逗号隔开的页面name,列如：'name,home'；
     * 2.每个页面必须写name值，与include内对应；
     * 3.如果暂无缓存页面，则设置默认值为空数组[],否则所有页面都会被缓存。
     */
    keepLive() {
      return this.routerNames.length !== 0 ? this.routerNames.join(',') : []
    }
  },
  watch: {
    $route() {
      let router = this.$route;
      // 判断页面是否需要缓存
      if(router.meta.keepAlive && this.routerNames.indexOf(router.name) === -1){
        this.routerNames.push(router.name)
      }
    }
  },
  mounted() {
    const iconArr = [
      // 技术图标
      '//at.alicdn.com/t/font_1823192_y4ka7hoy0wk.js'
    ]
    for (let i = 0; i < iconArr.length; i++) {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https:' + iconArr[i]
      document.body.appendChild(script)
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}

.router {
  position: absolute;
  height: 100%;
  overflow-y: auto;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th,td,  article, aside, details, embed, figure, figcaption,
footer, header, menu, nav, output, ruby, section,
summary, time, mark, audio, video, input{
  font-size: 15px;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  word-break: break-all;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, Consolas, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
}


</style>
